'
<template>
  <div>
    <van-nav-bar
      class="box"
      title="品牌详情"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="box">
      <van-image width="10rem" fit="contain" :src="list.list_pic_url" />
      <span class="ppx">{{ list.name }} | {{ list.floor_price }}</span>
      <div class="text">{{ list.simple_desc }}</div>
    </div>
    <!-- 列表 -->
    <van-grid class="ppx1" :border="false">
      <van-grid-item
        v-for="item in listData"
        :key="item.id"
        @click="$router.push('/goodsDetail/' + item.id)"
      >
        <van-image
          round
          width=" 150px"
          height="150px"
          :src="item.list_pic_url"
        />

        <span class="span1">{{ item.name }}</span>
        <span class="span2">￥{{ item.retail_price }}</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { getListInfo, getListData } from "@/api/zhouyu/home.js";
export default {
  name: "Bddetail",
  data() {
    return {
      list: {},
      listData: [],
    };
  },
  created() {
    this.initData();
    this.initDataList();
  },
  methods: {
    async initData() {
      const { data } = await getListInfo(this.$route.params.bddetailId);
      console.log(data);
      this.list = data.data.brand;
      console.log(this.list);
    },
    async initDataList() {
      const { data } = await getListData(this.$route.params.bddetailId);
      console.log(data);
      this.listData = data.data.data;
      console.log(this.listData);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar__content {
  background-color: red;
}
/deep/.van-nav-bar__title {
  color: #fff;
}
/deep/.van-icon-arrow-left:before {
  color: #fff;
}
.box {
  position: relative;
  text-align: center;
}
.ppx {
  position: absolute;
  text-align: center;
  width: 100%;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 35px;
  font-weight: 700;
}
.text {
  margin-top: 20px;
  padding: 0px 20px 0 20px;
  font-size: 30px;
  color: #666;
  text-align: center;
}
.ppx1 {
  text-align: center;
  margin: 0 40px;
}
.span1 {
  margin-top: 10px;
  font-size: 16px;

  word-break: keep-all;
}
.span2 {
  color: red;

  margin-top: 10px;
}
</style>
'
